<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-position="top"
    label-width="120px"
    style="width: 300px;padding-left: 40%;padding-top: 200px;"
  >
    <!-- 输入学号 -->
    <el-form-item label="学号：" prop="id">
      <el-input v-model.number="ruleForm.id" type="text" autocomplete="off" />
    </el-form-item>
    <!-- 输入邮箱 -->
    <el-form-item label="邮箱：" prop="email">
      <el-input v-model="ruleForm.email" type="text" autocomplete="off"/>
    </el-form-item>
    <!-- 输入验证码 -->
    <el-form-item label="验证码：" prop="code">
      <el-input v-model="ruleForm.code" type="text" autocomplete="off"/>
    </el-form-item>
    <!-- 发送验证码 -->
    <el-form-item>
      <el-button type="primary" @click="sendCode" :disabled="codeBtnDisabled">{{ codeBtnText }}</el-button>
      <el-button style="margin-left: 80%; margin-top: -30px;" @click="activation1">验证</el-button>
      <!-- 重置表单 -->
    </el-form-item>
  </el-form>
</template>

<script>
import { register1,register2 } from '@/api/index/register'
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        email: '',
        code: ''
      },
      rules: {
        id: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      codeBtnDisabled: false,
      codeBtnText: '发送验证码'
    };
  },
  methods: {
    //发送验证码
    sendCode() {
      this.codeBtnDisabled = true;
      let count = 60;
      let timer = setInterval(() => {
        count--;
        this.codeBtnText = `${count}秒后重新发送`;
        if (count === 0) {
          clearInterval(timer);
          this.codeBtnDisabled = false;
          this.codeBtnText = '发送验证码';
        }
      }, 1000);
        this.activation()
    },
    activation() {
          // 发送数据
          register1({
              id: this.ruleForm.id,
              email: this.ruleForm.email,
            }
          ).then((resp) => {
            let code = resp.data.code;
            if (code === 200) {
              console.log('发送成功');
            } else if (code === 201) {
              alert('该用户已激活');
            } else {
              alert('验证失败');
            }
          });
        },

        activation1() {
          // 发送数据
          register2({
              email: this.ruleForm.email,
              code:this.ruleForm.code
          }).then((resp) => {
            let code = resp.data.code;
            if (code === 200) {
              alert('验证成功')
            } else if (code === 201) {
              alert('该用户已激活');
            } else {
              alert('不存在该用户');
            }
          });
        },
    resetForm() {
      this.$refs.ruleFormRef.resetFields();
    }
  }
};
</script>
